<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="left">logo - higo后台管理系统</div>
        <div class="right">
          欢迎您 - {{ username }}
          <el-button @click="exitFn">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#76b1e1"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
          >
            <template v-for="item in menudata" :key="item">
              <el-menu-item v-if="!item.children" :index="item.path">
                {{ item.label }}
              </el-menu-item>
              <el-sub-menu v-else :index="item.id">
                <template #title>
                  <span>{{ item.label }}</span>
                </template>
                <el-menu-item
                  v-for="sonItem in item.children"
                  :index="sonItem.path"
                  :key="sonItem"
                  >{{ sonItem.label }}</el-menu-item
                >
              </el-sub-menu>
            </template>

            <!-- <el-sub-menu index="HomePage">
              <template #title>
                <el-icon><HomeFilled /></el-icon>
                <span>首页</span>
              </template>
              <el-menu-item index="/HomeIndex/HomePage">首页</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="Goods">
              <template #title>
                <el-icon><icon-menu /></el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/HomeIndex/GoodsList">商品列表</el-menu-item>
              <el-menu-item index="/HomeIndex/GoodsCategory"
                >分类搜索
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="Banner">
              <template #title>
                <el-icon><PictureFilled /></el-icon>
                <span>轮播图管理</span>
              </template>
              <el-menu-item index="/HomeIndex/BanList">轮播图列表</el-menu-item>
              <el-menu-item index="/HomeIndex/BanAdd">添加轮播图</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="Admin">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>操作人员管理</span>
              </template>
              <el-menu-item index="/HomeIndex/AdminList"
                >操作人员列表
              </el-menu-item>
              <el-menu-item index="/HomeIndex/AdminAdd"
                >添加操作人员
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="ShoppingCar">
              <template #title>
                <el-icon><GoodsFilled /></el-icon>
                <span>购物车管理</span>
              </template>
              <el-menu-item index="/HomeIndex/ShoppingList"
                >购物车列表
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="User">
              <template #title>
                <el-icon><Platform /></el-icon>
                <span>用户信息</span>
              </template>
              <el-menu-item index="/HomeIndex/UserList">用户列表 </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="Order">
              <template #title>
                <el-icon><List /></el-icon>
                <span>订单信息</span>
              </template>
              <el-menu-item index="/HomeIndex/OrderList"
                >订单列表
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="Chart">
              <template #title>
                <el-icon><Histogram /></el-icon>
                <span>数据图表</span>
              </template>
              <el-menu-item index="/HomeIndex/ChartKLine"
                >简单K线图
              </el-menu-item>
              <el-menu-item index="/HomeIndex/ChartData"
                >简单图表数据
              </el-menu-item>
            </el-sub-menu> -->
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
// 需要跳转的页面引入useRouter
import { useRouter } from "vue-router";

import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";

// 导入菜单数据
import getMenus, { menudata as data } from "../../grants/menudata";

// 导入权限的路由
import getRoutes, { clearCurrentRoutes } from "../../grants/router";

// 引入vuex
import { useStore } from "vuex";

// 定义rputer
const router = useRouter();


// 定义menudata使用proxy的基本类型
// reactive参数必须是对象(json/arr)
const menudata = reactive(getMenus());


let $store = useStore();

// 如果获取到仓库的isAddRoute没添加就添加
if (!$store.state.isAddRoute) {
  getRoutes();
}

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 获取用户名
const username = ref(sessionStorage.getItem("username"));
// 退出
const exitFn = () => {
  sessionStorage.clear(); // 清空当前保存的值
  clearCurrentRoutes(); // 清除当前用户的路由配置
  // 退出时保证vuex中的值为false
  $store.commit({
    type: "setIsAddRoute",
    isAddRoute: false,
  });
  router.push("/Login");
  ElMessage({
    message: "退出登录！",
    type: "success",
  });
};
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-aside {
  width: 200px;
  height: 100%;
  background-color: #dae5f5;
}

.el-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: skyblue;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-menu-item {
  color: #874154;
  background-color: #dae5f5;
}
</style>